<template>
	<view>
		<view class="list gui-flex gui-rows gui-align-items-center">
			<view class="group-item">
				<image class="img" src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/25.png" alt="">
					<view class="txt">
						<text class="text">限时特价</text>
					</view>
					<view class="info">
						<view>
							<text
								class="gui-list-title-text gui-primary-color gui-list-one-line gui-ellipsis">唯智iPhone12皮纹手机</text>
						</view>
						<view class="gui-flex gui-rows gui-space-between">
							<view class="price-box gui-flex gui-rows gui-align-items-center">
								<text class="group_price gui-img-card-price gui-text gui-color-red">¥52.00</text>
								<text class="price gui-text gui-color-gray">¥72.00</text>
							</view>
							<view class="shop_card">
								<text class="icon gui-block-text gui-icons gui-color-white">&#xe60a;</text>
							</view>
						</view>
					</view>
			</view>
			<view class="group-item">
				<image class="img" src="https://cmsuse.oss-cn-beijing.aliyuncs.com/g5/30.png" alt="">
					<view class="txt">
						<text class="text">限时特价</text>
					</view>
					<view class="info">
						<view>
							<text
								class="gui-list-title-text gui-primary-color gui-list-one-line gui-ellipsis">唯智iPhone12皮纹手机</text>
						</view>
						<view class="gui-flex gui-rows gui-space-between">
							<view class="price-box gui-flex gui-rows gui-align-items-center">
								<text class="group_price gui-img-card-price gui-text gui-color-red">¥52.00</text>
								<text class="price gui-text gui-color-gray">¥72.00</text>
							</view>
							<view class="shop_card">
								<text class="icon gui-block-text gui-icons gui-color-white">&#xe60a;</text>
							</view>
						</view>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "product-list",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	/*         */
	.group-item {
		width: 300upx;
		box-shadow: 2upx 4upx 12upx 4upx rgba(0, 0, 0, 0.1);
		border-radius: 16upx;
		margin: 20upx 11upx 10upx;
		background-color: #fff
	}

	.group-item .img {
		width: 300upx;
		height: 280upx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.group-item .txt {
		position: absolute;
		width: 120rpx;
		height: 32rpx;
		background: #fb5036;
		opacity: 0.6;
		border-radius: 16upx 0upx;
		top: 0rpx;
		left: 0rpx;
	}

	.group-item .txt .text {
		font-size: 20rpx;
		color: #fff;
		text-align: center;
		line-height: 32rpx;
	}

	.group-item .info,
	.shop-item .info {
		padding: 2rpx 12rpx 10rpx 12rpx;
	}

	.group-item .info .name,
	.shop-item .info .name {
		font-size: 24rpx;
	}

	.group_price {
		padding-right: 10upx;
	}

	.price {
		font-size: 22upx !important;
		text-decoration: line-through;
	}

	.shop_card {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		background-color: #fb5036;

		.icon {
			line-height: 60upx;
			text-align: center;
		}
	}
</style>
